<template>
  <div class="completed-tasks-page">
    <el-card class="page-card">
      <template #header>
        <div class="card-header">
          <span><i class="el-icon-success"></i> 已完成任务 ({{ completedPackages.length }})</span>
        </div>
      </template>

      <el-empty v-if="loading" description="正在加载任务..."></el-empty>
      <el-empty v-else-if="completedPackages.length === 0" description="暂无已完成任务"></el-empty>

      <div v-else class="task-list">
        <el-card v-for="pkg in completedPackages" :key="pkg.packageId" class="task-package-card" shadow="hover">
          <template #header>
            <div class="package-header">
              <span class="package-id">任务包ID: {{ pkg.packageId }}</span>
              <el-tag type="success" effect="dark">已完成</el-tag>
            </div>
          </template>
          <div class="package-content">
            <div class="info-row">
              <i class="el-icon-location-outline"></i>
              <strong>目的地:</strong>
              <span>{{ pkg.destination }}</span>
            </div>
            <div class="info-row">
              <i class="el-icon-box"></i>
              <strong>订单数:</strong>
              <span>{{ pkg.orderCount }} 单</span>
            </div>
            <div class="info-row">
              <i class="el-icon-money"></i>
              <strong>总赏金:</strong>
              <span class="reward">¥ {{ pkg.totalReward }}</span>
            </div>
            <div class="info-row">
              <i class="el-icon-collection-tag"></i>
              <strong>订单号:</strong>
              <span>{{ pkg.orderNumbers }}</span>
            </div>
          </div>
          <div class="package-footer">
            <el-button type="primary" plain size="small" @click="viewTaskDetail(pkg)">
              查看详情
            </el-button>
          </div>
        </el-card>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { getTaskPackages } from '@/assets/delivery.js';

const completedPackages = ref([]);
const router = useRouter();
const loading = ref(false);

const searchForm = reactive({
  packageId: '',
  deliveryArea: '',
  // ... 其他搜索项
});

const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
});

const fetchTaskPackages = async () => {
  loading.value = true;
  const queryParams = {
    page: pagination.currentPage,
    size: pagination.pageSize,
    status: "completed", // 关键：已完成
    ...searchForm,
  };
  try {
    const response = await getTaskPackages(queryParams);
    if (response.data && response.data.data) {
      completedPackages.value = response.data.data.records || [];
    } else {
      completedPackages.value = [];
    }
  } catch (error) {
    ElMessage.error('获取已完成任务列表失败');
  } finally {
    loading.value = false;
  }
};

onMounted(fetchTaskPackages);

const viewTaskDetail = (taskPackage) => {
  router.push(`/delivery/tasks/${taskPackage.packageId}`);
};
</script>

<style scoped>
/* 复用 Ongoing.vue 的样式即可 */
</style>